<script>
export default {
    props: {
        type:{
            type:String,
            required:true,
            default:'before'
        },
        fieldCfg:{
            type:Object,
            requried:true,
            default(){
                return {}
            },
        },
        after:{
            requried:true,
            default:null
        },
        before:{
            requried:true,
            default:null
        }
    },
    data() {
        return {
            dialogTableVisible:false,
        }
    },
    methods: {
        openTable(){
            this.dialogTableVisible = true
        }
    },
    computed:{
        data(){
            return this.type === 'before' ? this.before : this.after
        }
    }
}
</script>

<template>
    <div>
        <el-button type="text" @click="openTable">{{data.length}}个成员</el-button>

        <el-dialog append-to-body title="家庭成员" :visible.sync="dialogTableVisible">
            <el-table :data="data">
                <el-table-column property="member" label="姓名" />
                <el-table-column property="age" label="年龄" />
                <el-table-column property="occupations" label="职业" />
                <el-table-column property="political_outlook" label="政治面貌" />
                <el-table-column property="relationship" label="关系" />
                <el-table-column property="work_unit" label="工作单位" />
            </el-table>
        </el-dialog>
    </div>
</template>